import 'package:flutter/material.dart';
import 'package:portal_website/pages/common_header.dart';

class InterlligentCompuCenterPage extends StatefulWidget {
  const InterlligentCompuCenterPage({super.key});

  @override
  State<InterlligentCompuCenterPage> createState() =>
      _IntelligentComputingCenterState();
}

class _IntelligentComputingCenterState
    extends State<InterlligentCompuCenterPage> {
  String _activeSection = 'home';

  @override
  Widget build(BuildContext context) {
    final navItems = [
      {"name": "首页", "route": "/"},
      {"name": "智算中心", "route": "/"},
      {"name": "知识中枢", "route": "/"},
      {"name": "模型中枢", "route": "/"},
      {"name": "联系我们", "route": "/"},
    ];

    return Scaffold(
      backgroundColor: const Color(0xFFF5F9FF),
      body: Container(
        margin: EdgeInsets.only(top: 50),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Breadcrumb(
                text: "首页 > 服务平台 > 智算中心",
              ),
              // 主体内容
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 左侧导航
                  _buildSidebar(),
                  // 右侧内容区
                  _buildMainContent(),
                ],
              ),
              // 页脚
              _buildFooter(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildNavItem(String title) {
    return Padding(
      padding: const EdgeInsets.only(left: 25),
      child: Text(
        title,
        style: const TextStyle(
          color: Colors.white,
          fontSize: 16,
        ),
      ),
    );
  }

  Widget _buildBreadcrumb() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 15),
      child: Text(
        '首页 > 服务平台 > 智算中心',
        style: TextStyle(
          color: Colors.grey[600],
          fontSize: 14,
        ),
      ),
    );
  }

  Widget _buildSidebar() {
    return Container(
      width: 250,
      margin: const EdgeInsets.only(right: 30, top: 20),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '智算中心',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          const Divider(height: 30, thickness: 2, color: Color(0xFFF0F0F0)),
          _buildSidebarItem('首页', 'home'),
          _buildSidebarItem('建设概况', 'construction'),
          _buildSidebarItem('政策资讯', 'policy'),
          _buildSidebarItem('活动报道', 'activity'),
          _buildSidebarItem('服务介绍', 'service'),
        ],
      ),
    );
  }

  Widget _buildSidebarItem(String title, String sectionId) {
    final isActive = _activeSection == sectionId;
    return Padding(
      padding: const EdgeInsets.only(bottom: 15),
      child: InkWell(
        onTap: () => setState(() => _activeSection = sectionId),
        borderRadius: BorderRadius.circular(4),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
          decoration: BoxDecoration(
            color: isActive ? const Color(0xFFF0F7FF) : Colors.transparent,
            borderRadius: BorderRadius.circular(4),
          ),
          child: Row(
            children: [
              if (isActive)
                Padding(
                  padding: EdgeInsets.only(right: 6),
                  child: SizedBox(
                    width: 4,
                    height: 16,
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                        color: Color(0xFF207CCA),
                        borderRadius: BorderRadius.circular(2),
                      ),
                    ),
                  ),
                ),
              Text(
                title,
                style: TextStyle(
                  color: isActive ? const Color(0xFF1E5799) : Colors.grey[600],
                  fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildMainContent() {
    return Expanded(
      child: Container(
        margin: const EdgeInsets.only(top: 20),
        padding: const EdgeInsets.all(30),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              blurRadius: 15,
              offset: const Offset(0, 3),
            ),
          ],
        ),
        child: _getSectionContent(),
      ),
    );
  }

  Widget _getSectionContent() {
    switch (_activeSection) {
      case 'home':
        return _buildHomeSection();
      case 'construction':
        return _buildConstructionSection();
      case 'service':
        return _buildServiceSection();
      default:
        return const Center(child: Text('内容建设中'));
    }
  }

  Widget _buildHomeSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '智算中心',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 28,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline,
            decorationColor: Color(0xFFF0F0F0),
            decorationThickness: 2,
          ),
        ),
        const Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Text(
            '提供强大的计算能力和算法支持，赋能企业数字化转型与智能化升级',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
        ),
        _buildPlaceholderImage(300),
        const SizedBox(height: 20),
        const Text(
          '智算中心是创新服务平台的核心计算基础设施，集成了高性能计算集群、人工智能训练平台和大数据分析系统，为企业、科研机构和政府部门提供强大的计算能力支持。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 16),
        const Text(
          '中心拥有超过10PFlops的计算能力，配备最新的GPU和TPU加速卡，支持大规模并行计算和深度学习训练任务。我们的专业团队将为您提供全方位的技术支持，帮助您充分利用计算资源。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        const SizedBox(height: 30),
        const Text(
          '核心能力',
          style: TextStyle(
            color: Color(0xFF333333),
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 20),
        _buildFeatureGrid(),
      ],
    );
  }

  Widget _buildFeatureGrid() {
    List tmpList = [
      {"name": "高性能计算", "desc": "提供超算级别的计算能力，支持大规模科学计算、工程仿真和数值模拟。"},
      {"name": "AI训练平台", "desc": "专为深度学习优化的训练平台，支持主流框架，加速AI模型开发流程。"},
      {"name": "大数据分析", "desc": "处理PB级数据的能力，提供数据清洗、分析和可视化工具。"},
    ];
    return GridView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 450,
            crossAxisSpacing: 20,
            mainAxisSpacing: 20,
            mainAxisExtent: 120),
        itemBuilder: (context, index) {
          Map tmp = tmpList[index];
          return _buildFeatureCard(tmp["name"], tmp["desc"]);
        },
        itemCount: tmpList.length);
  }

  Widget _buildFeatureCard(String title, String content) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: const Color(0xFFF9FBFF),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: const Color(0xFFE0E9FF)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 10),
          Text(
            content,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildConstructionSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '建设概况',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 28,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline,
            decorationColor: Color(0xFFF0F0F0),
            decorationThickness: 2,
          ),
        ),
        const Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Text(
            '智算中心的发展历程与建设成果',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
        ),
        _buildPlaceholderImage(300),
        const SizedBox(height: 20),
        const Text(
          '智算中心于2023年启动建设，总投资5亿元人民币，占地面积5000平方米，是区域规模最大、计算能力最强的公共计算服务平台。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
      ],
    );
  }

  Widget _buildServiceSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '服务介绍',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 28,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline,
            decorationColor: Color(0xFFF0F0F0),
            decorationThickness: 2,
          ),
        ),
        const Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Text(
            '智算中心提供的各类计算服务',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
        ),
        _buildServiceItem(
          '高性能计算服务',
          '提供超算级别的计算能力，支持大规模科学计算、工程仿真和数值模拟。我们的集群采用最新一代处理器和高速互联技术，可高效处理复杂的计算任务。',
          '服务特点：支持MPI并行计算、提供多种科学计算软件、专业团队优化支持',
          '适用领域：气象预测、分子模拟、流体力学、有限元分析等',
        ),
        _buildServiceItem(
          'AI训练服务',
          '专为深度学习优化的训练平台，支持TensorFlow、PyTorch等主流框架。提供分布式训练、自动超参优化和模型管理功能，加速AI模型开发流程。',
          '服务特点：多GPU节点训练、可视化训练监控、模型版本管理',
          '适用领域：计算机视觉、自然语言处理、推荐系统等',
        ),
        _buildServiceItem(
          '大数据分析服务',
          '处理PB级数据的能力，支持Hadoop、Spark等大数据生态系统。提供数据清洗、分析和可视化工具，帮助用户从海量数据中提取有价值的信息。',
          '服务特点：多种数据源接入、交互式分析环境、可视化仪表板',
          '适用领域：用户行为分析、日志分析、商业智能等',
        ),
      ],
    );
  }

  Widget _buildServiceItem(
      String title, String desc1, String desc2, String desc3) {
    return Container(
      margin: const EdgeInsets.only(bottom: 30),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          const Divider(height: 25, thickness: 1, color: Color(0xFFF0F0F0)),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildPlaceholderImage(200, width: 300),
              const SizedBox(width: 20),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      desc1,
                      style: const TextStyle(
                        color: Color(0xFF555555),
                        fontSize: 15,
                        height: 1.8,
                      ),
                    ),
                    const SizedBox(height: 10),
                    Text(
                      desc2,
                      style: const TextStyle(
                        color: Color(0xFF555555),
                        fontSize: 15,
                        height: 1.8,
                      ),
                    ),
                    const SizedBox(height: 10),
                    Text(
                      desc3,
                      style: const TextStyle(
                        color: Color(0xFF555555),
                        fontSize: 15,
                        height: 1.8,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildFooter() {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 50),
      padding: const EdgeInsets.all(30),
      decoration: BoxDecoration(
        color: const Color(0xFF1A1A2E),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              _buildFooterLink('关于我们'),
              _buildFooterLink('服务条款'),
              _buildFooterLink('隐私政策'),
              _buildFooterLink('帮助中心'),
              _buildFooterLink('联系我们'),
            ],
          ),
          const SizedBox(height: 20),
          const Text(
            '© 2025 创新服务平台智算中心 版权所有',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
          const SizedBox(height: 10),
          const Text(
            '地址：XX省XX市XX区XX路XX号 | 服务热线：400-123-4567 | 邮箱：hpc@innovationservice.com',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFooterLink(String text) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: Text(
        text,
        style: const TextStyle(
          color: Color(0xFFA8B2D1),
          fontSize: 14,
        ),
      ),
    );
  }

  Widget _buildPlaceholderImage(double height,
      {double width = double.infinity}) {
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 10,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: const Center(
        child: Text(
          '图片占位',
          style: TextStyle(
            color: Colors.grey,
            fontSize: 16,
          ),
        ),
      ),
    );
  }
}
